<template>
  <div id="cb_couponinfo">
    <magic-header titleName="优惠券详情" v-if="!isWxPublic" :isCoupon="isGet && isGet !== 'false'" v-on:shareCoupon="shareCoupon"></magic-header>
    <section>
      <!-- 卡券标题 -->
      <p class="amount">
        <span>{{couponData.amount}}</span>
        <span>{{couponData.cardType}}</span>
      </p>
      <!-- 卡券标题End -->
      <!-- 卡券详细信息 -->
      <div class="detail-wrapper">
        <ul>
          <li>
            <span>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</span>{{couponData.name}}
            <span></span>
          </li>
          <li>
            <span>适用店铺:</span>
            <span>{{couponData.shopName}}</span>
          </li>
          <li>
            <span>有&nbsp;&nbsp;效&nbsp;&nbsp;期:</span>
            <span>{{couponData.useDate}}</span>
          </li>
          <li v-if="couponData.minimumPrice">
            <span>使用限制:</span>
            <span>满{{couponData.minimumPrice}}可用</span>
          </li>
        </ul>
        <!-- 卡券详细信息End -->
        <!-- 导航打电话 -->
        <div class="phone-go">
          <div class="left" v-if="!isWxPublic && hasPhone">
            <i class="iconfont icon-dianhua" @click="call"></i>电话</div>
          <div class="left" v-if="isWxPublic && hasPhone">
            <a :href="phoneNumber">
              <i class="iconfont icon-dianhua"></i>
            </a>电话</div>
          <div class="left" v-if="!hasPhone">
            <i class="iconfont icon-dianhua"></i>暂无电话</div>
          <div class="right">
            <i class="iconfont icon-daohang" @click="go"></i>到这去</div>
        </div>
        <!-- 导航打电话End -->
      </div>
      <!-- 二维码 -->
      <div class="qrcode">
        <vue-qr :text="text" height="200" width="200"></vue-qr>
        <img class="logo" :src="logo" alt="">
      </div>
      <!-- 二维码End -->
      <p v-if="!isGet" class="couponId">{{couponData.code}}</p>
      <ruleList v-if="couponData.rule !== ''" :isIndex="false" :message="'使用规则'" :value="couponData.rule" :isShow="true"></ruleList>
      <div v-if="!isHideUse && $.appname !== 'cn.carowl.vfuhuizhong' && (!isGet || isGet == 'false')&&(this.couponData.state !== '4'&&this.couponData.state !== '3')" class="use" @click="use">立即使用</div>
      <div v-if="$.appname !==  'cn.carowl.vfuhuizhong' && (!isGet || isGet == 'false')&& this.couponData.state === '4'" class="used">已使用</div>
      <div v-if="$.appname !==  'cn.carowl.vfuhuizhong' && (!isGet || isGet == 'false')&& this.couponData.state === '3'" class="used">已过期</div>
      <div v-if="$.appname !== 'cn.carowl.vfuhuizhong' && (isGet && isGet !== 'false') " class="use" @click="getCoupon">领取</div>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import magicHeader from "components/magicHeader";
import VueQr from 'vue-qr'
import imagesServices from "services/getImage/getImage";
import vfacLogo from "assets/vfaclogo.jpg";
import cbCouponInfoService from "services/consumerBill/cb_couponInfo";
import ruleList from "components/rule";
import { receiveConpon } from "services/o_getCoupon.js";
import wx from "weixin-js-sdk";

export default {
  components: {
    magicHeader,
    ruleList,
    VueQr
  },
  data() {
    return {
      type: "",
      text: "",
      desc: "",
      id: "",
      coupeCodeId: "",
      isGet: false,
      logo: "",
      isWxPublic: false,
      couponCodeId: "",
      couponData: {},
      isHideUse: false,
      phoneNumber: "",
      hasPhone: true,
      positionArr: {}
    };
  },
  
  created() {
    // 是否登录, 是否是wechat brower
    if (!this.$.userId) {
      this.$.goLogin({
        name: 'login',
        wechat_download: true
      })
      return
    }
    if (this.$.env === "wxPublic") {
      this.$.wxSign();
      this.isWxPublic = true;
      wx.ready(function () {
        alert("微信鉴权成功");
        wx.hideOptionMenu();
      });
    }
    this.isGet = this.$route.query.isGet;
    console.log(typeof this.isGet);
    console.log(this.$route.query);
    this.id = this.$route.query.id;
    this.couponCodeId = this.$route.query.couponCodeId;
    // if (this.$.appname === "cn.carowl.vfuhuizhong") {
    //   imagesServices.bind(this)({}, res => {
    //     this.logo = res.data.newLogo;
    //   });
    // } else if (this.isWxPublic) {
    // imagesServices.bind(this)({}, res => {
    // this.logo = res.data.newLogo;
    // });
    // } else {
    this.logo = vfacLogo;
    // }
    cbCouponInfoService.bind(this)(
      {
        methodName: "QueryCoupon",
        couponId: this.id,
        couponCodeId: this.couponCodeId
      },
      res => {
        // 数据在 services 文件中处理
        this.couponData = res;
        this.type = res.type;
        this.isHideUse = res.isHideUse;
        if (res.shop.mobile) {
          this.phoneNumber = "tel:" + res.shop.mobile;
          this.hasPhone = true;
        } else {
          this.hasPhone = false;
        }
        this.text = this.addPath(
          "index.html?type=" + this.type + "&id=" + this.couponData.code
        );
        console.log(document)
        console.log(this.text)
        this.positionArr = [
          {
            longitude: res.shop.longitude,
            latitude: res.shop.latitude,
            name: res.shop.name,
            route: true
          }
        ];
      },
      err => { }
    );
  },
  methods: {
    shareCoupon() {
      //  	console.log(location.pathname + location.hash)
      let url = document.location.hash.slice(1, document.location.hash.length);
      let couponData = this.couponInfo;
      this.$.push(
        "route_share",
        {
          shareId: this.id, //产品id
          shareType: "10", //分享类型
          shareTitle: this.name,
          shareContent: this.desc,
          targetUrl: location.pathname + location.hash,
          shareUrl: url
        },
        resp => {
          console.log(resp);
        }
      );
      // this.$.go({
      //   name: "route_share",
      //   query: {
      //     shareId: this.id, //产品id
      //     shareType: "10", //分享类型
      //     shareTitle: this.name,
      //     shareContent: this.desc,
      //     targetUrl: location.pathname + location.hash,
      //     shareUrl: url,
      //   }
      // });
    },
    getCoupon(id) {
      receiveConpon.bind(this)(
        {
          couponId: this.id
        },
        resp => {
          this.$.toast("领取优惠券成功");
        },
        error => {
          this.$.toast(error);
          console.log(error);
        }
      );
    },
    //打电话 桥接
    call() {
      if (this.couponData.shop.mobile) {
        if (this.$.isWxPublic) {
        }
        this.$.push(
          "router_callOthers",
          {
            phone: this.couponData.shop.mobile
          },
          () => {
            console.log("调用成功");
          }
        );
      } else {
        this.$.toast("暂无电话");
      }
    },
    go() {
      alert(JSON.stringify(this.positionArr))
      this.$router.push({
        name: "map",
        params: {
          mapParams: this.positionArr
        }
      });
    },
    use() {
      let _couponData = this.couponData;
      if (this.type === "1") {
        this.$router.push({
          name: "sg_goodsList"
        });
      } else if (this.type === "2" || this.type === "3") {
        this.$.toast("请到店铺进行核销");
        // this.$router.push({
        //   name: "cb_couponInfo",
        //   query: {
        //     id: this.id
        //   }
        // });
      } else if (this.type === "4") {
        //团购券
        this.$router.push({
          name: "eve_groupShoppingDetails",
          params: {
            coupon: {
              name: _couponData.name,
              id: this.id,
              amount: _couponData.amount
            },
            activityId: _couponData.activityId
          }
        });
      } else if (this.type === "5") {
        //秒杀券
        this.$router.push({
          name: "eve_timeSpikeDetails",
          params: {
            coupon: {
              name: _couponData.name,
              id: this.id,
              amount: _couponData.amount
            },
            activityId: _couponData.activityId
          }
        });
      } else {
        this.$router.push({
          name: "sg_goodsList"
        });
      }
    }
  }
};
</script>
<style lang="scss">
#cb_couponinfo {
  .amount {
    display: flex;
    padding: 5px;
    margin-top: 15px;
    color: #f98700;
    font-size: 24px;
    padding-left: 25px;
    span:first-child {
      display: inline-block;
      height: 24px;
      line-height: 24px;
      padding-top: 7px;
    }
    span:last-child {
      display: inline-block;
      margin: 8px 0 0 10px;
      font-size: 12px !important;
      border-radius: 5px;
      padding: 0 5px;
      color: #fff;
      background-color: #f98700;
      height: 22px;
      line-height: 22px;
    }
  }
  .detail-wrapper {
    display: flex;
    ul {
      flex: 1;
      width: 100vw;
      li {
        display: flex;
        font-size: 14px;
        padding: 5px;
        span:first-child {
          width: 100px;
          text-align: center;
        }
        span:last-child {
          flex: 0 0 1;
        }
      }
    }
    .phone-go {
      flex: 0 0 120px;
      display: flex;
      .left,
      .right {
        flex: 1;
        text-align: center;
        i {
          display: block;
          margin: 10px 0 10px 0;
          font-size: 30px;
        }
      }
    }
  }
  .qrcode {
    position: relative;
    margin-top: 10px;
    text-align: center;
    border: none!important;
    img{
      position: absolute;
      width: 200px;
      height: 200px;
      left: calc(50vw - 100px);
      top: 15px;
    }
    .logo {
      position: absolute;
      width: 30px;
      height: 30px;
      left: calc(50vw - 15px);
      top: 95px;
    }
  }
  .couponId {
    text-align: center;
    margin-top: 240px;
  }
  .use {
    position: fixed;
    bottom: 0;
    height: 46px;
    line-height: 46px;
    width: 100vw;
    color: #fff;
    background-color: #f98700;
    font-size: 16px;
    text-align: center;
  }
  .used {
    position: fixed;
    bottom: 0;
    height: 46px;
    line-height: 46px;
    width: 100vw;
    color: #fff;
    background-color: #b0b0b0;
    font-size: 16px;
    text-align: center;
  }
}
</style>
